<template>
  <div class="milepost">
    <div class="head pt32 pb32">
      <div class="back-title ft14 ">
        <div class="back pr32 align-row-center pointer">
          <i class="icon ic_back mr8"></i>
          <span @click="goIndex">返回</span>
        </div>
        <div class="fc-black">{{projectName}}>里程碑</div>
        <div class="save-milepost" @click="save" v-show="!isComplete">保存里程碑</div>
      </div>
    </div>
    <div class="content">
      <vuescroll :ops="ops">
        <div class="row">
          <div class="left">
            <div class="top"></div>
          </div>
          <div class="right">
            <ul class="top-list">
              <li>执行人</li>
              <li>开始时间</li>
              <li>截止时间</li>
              <li>定期汇报</li>
              <li>完结情况</li>
              <li>操作</li>
            </ul>
          </div>
        </div>
        <div class="row">
          <div class="tree">
            <el-tree
              :data="data"
              node-key="id"
              default-expand-all
              @node-expand="nodeExpand"
              @node-collapse="nodeCollapse"
              :expand-on-click-node="false">
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <span class="milepost_name">{{ data.name}}</span>
                <span class="milepost-btn">
                  <div class="milepost-add" @click="() => append(node,data)" v-show="!isComplete"></div>
                  <div class="milepost-del" @click="() => remove(node, data)" v-show="node.level!=1&&!isComplete"></div>
                </span>
                 <ul class="info-list">
                    <li :class="['info-item',node.level==1?'info-item-first':'']">
                      <ul>
                        <li>{{data.principalName||'无'}}</li>
                        <li>
                          {{data.startTime?(data.startTime!=''?/\d{4}-\d{1,2}-\d{1,2}/g.exec(data.startTime)[0]:'无'):'无'}}
                        </li>
                        <li>
                          {{data.startTime?(data.endTime!=''?/\d{4}-\d{1,2}-\d{1,2}/g.exec(data.endTime)[0]:'无'):'无'}}
                        </li>
                        <li>
                            <span v-if="data.reportCycleType!=0">
                              <span v-if="data.reportCycleType==7">每周</span>
                              <span v-if="data.reportCycleType==30">每月</span>
                              <span v-for="(item,index) in data.days" :key="index">{{item}},</span>
                              <span>{{data.reportTime}},汇报</span>
                            </span>
                          <span v-else>无</span>
                          <!--                         {{data.daysString}}{{data.level!=0?(data.reportCycleType!=0?data.reportTime:'无'):''}}-->
                        </li>
                        <li>{{data.status==1?'未开始':(data.status==2?'在建':(data.status==3?'完成':'未开始'))}}</li>
                        <li><i class="icon_set" @click="setMilepost(data,node)" v-show="node.level!=1&&!isComplete"></i></li>
                      </ul>
                    </li>
                  </ul>
              </span>
            </el-tree>
          </div>
        </div>
      </vuescroll>
    </div>
    <!--    修改里程碑基本信息-->
    <transition name="fade">
      <div class="set-milepost" v-show="is_show_set_milepost">
        <div class="set-milepost-inner">
          <div class="title">
            <h3>修改信息</h3>
            <i class="ic_close" @click="is_show_set_milepost=false"></i>
          </div>
          <div class="form">
            <el-form ref="milepostForm" :rules="rules" :model="milepostForm" label-width="144px" class="demo-ruleForm">
              <el-form-item label="名称" prop="name">
                <el-input placeholder="请输入里程碑名称" v-model="milepostForm.name"></el-input>
              </el-form-item>
              <el-form-item label="执行人" prop="principalId">
                <input type="hidden" v-model="milepostForm.principalId">
                <span class="add-manager" @click="is_show_selectMember=true"></span>
                <span class="select-manager" v-text="milepostForm.principalName">古俊</span>
              </el-form-item>
              <el-form-item label="选择日期" prop="startTime">
                <el-col style="float: left;width: 176px;">
                  <el-form-item>
                    <el-date-picker type="date" v-model="milepostForm.startTime" placeholder="开始时间"
                                    :picker-options="pickerOptionsStart"
                                    value-format="yyyy-MM-dd 00:00:00"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col style="float: left;width: 48px;text-align: center" class="line line-time">至</el-col>
                <el-col style="float: left;width: 176px;">
                  <el-form-item prop="endTime">
                    <el-date-picker type="date" v-model="milepostForm.endTime" placeholder="截止时间"
                                    :picker-options="pickerOptionsEnd"
                                    value-format="yyyy-MM-dd 23:59:59"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
              </el-form-item>
              <el-form-item label="定期汇报" prop="visibility">
                <input type="hidden" v-model="milepostForm.reportCycleType"/>
                <el-select placeholder="请选择定期汇报" v-model="reporting_time_type"
                           @change="selectReportingType(reporting_time_type)">
                  <el-option label="无" value="1"></el-option>
                  <el-option label="自定义" value="2"></el-option>
                </el-select>
                <p v-if="milepostForm.reportCycleType!=0">
                  <span v-if="milepostForm.reportCycleType==7">每周</span>
                  <span v-if="milepostForm.reportCycleType==30">每月</span>
                  <span v-for="item in milepostForm.days">
                    {{item}},
                  </span>
                  &nbsp;{{milepostForm.reportTime}},
                  汇报
                </p>
              </el-form-item>
              <el-form-item class="text-right">
                <div class="save-btn" @click="saveMilepost">确定</div>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </transition>
    <!--    修改里程碑基本信息-->
    <!--    自定义日期-->
    <customDate v-if="custom_date_data.is_show" :data="custom_date_data" @callback="selectDateCallback"></customDate>
    <!--    自定义日期-->
    <!--    选择执行人-->
    <div class="main-popup" v-if="is_show_selectMember">
      <selectMember @close="closeModal" :title="'选择执行人'" :select="executor" @callback="selectMemberCallback"
                    :indexClose="'is_show_selectMember'"/>
    </div>
    <!--    选择执行人-->
  </div>
</template>

<script>
  import vuescroll from 'vuescroll'
  import mileList from '@/components/milepost/list'
  import customDate from '@/components/customDate'
  import selectMember from '@/components/base/selectMember'; //选择执行人

  let add_id = 1000;
  let num=1;
  let milepost_num=1;
  export default {
    name: "Milepost",
    components: {
      vuescroll, mileList, customDate, selectMember
    },
    data() {
      return {
        managerId: '',//项目经理id
        //日期选择不能选择今天之前的日期
        pickerOptionsStart: {
          // disabledDate (date) {
          //   let  initdate = new Date("2019-11-15") - 86400000;// Date.now() - 86400000
          //   return date && date.valueOf()< initdate;
          // }
        },
        pickerOptionsEnd: {
          // disabledDate (date) {
          //   return date && date.valueOf() < Date.now() - 86400000;
          // }
        },
        rules: {
          name: [
            {required: true, message: '请输入里程碑名称', trigger: 'blur'},
          ],
          principalId: [
            {required: true, message: '请选择执行人', trigger: 'change'},
          ],
          startTime: [
            {required: true, message: '请选择开始时间', trigger: 'blur'},
          ],
          endTime: [
            {required: true, message: '请选择结束时间', trigger: 'blur'},
          ],
          reporting_time_type: [
            {required: true, message: '请选择定期汇报', trigger: 'change'},
          ]
        },
        reporting_time_type: 1,//1无 2自定义
        is_show_selectMember: false,//是否显示执行人框
        data: [],
        milepost_data: [],
        executor: '',//已选择执行人
        executor_info: {},//执行人信息
        ops: {
          vuescroll: {
            wheelDirectionReverse: false,//true：横向滚动，false：竖向滚动
            wheelScrollDuration: 0,//滚动速度
            mode: 'native',
            sizeStrategy: 'percent',
            detectResize: true
          },
          scrollPanel: {
            scrollingX: false,//启用横屏滚动
            scrollingY: true,//关闭竖向滚动
          },
          rail: {
            background: '#e5ebf1',
            opacity: 1,
            size: '6px',
            borderRadius: '6px',
            gutterOfEnds: '250px',//轨道距 x 和 y 轴两端的距离
            gutterOfSide: '0px',//距离容器的距离
            keepShow: false,
          },
          bar: {
            background: '#cbd5df',
            keepShow: true,
            size: '6px',
            minSize: 0.1
          }
        },
        parentId: '',//上级里程碑id
        projectId: '',//项目id
        mileList: [],//里程碑列表
        is_show_set_milepost: false,//是否显示设置里程碑信息框
        custom_date_data: {
          type: '1',//1每周 2每月
          is_show: false,//是否显示
        },//自定义日期数据
        milepostForm: {
          name: '',//里程碑名称
          ignoreHoliday: '',//是否跳过节假日
          ignoreWeekend: '',//是否跳过周末
          reportTime: '',//汇报时间
          days: [],//汇报日期，32表示每月最后一天
          startTime: '',//项目开始时间
          endTime: '',//项目结束时间
        },
        edit_id: '',//编辑的里程碑id
        tempId: '',//模板id
        // setMilepost_data:{},//编辑的当前里程碑对象
      }
    },
    created() {
      this.$store.commit('SET_MILEPOST_SAVE', true);
      this.projectId = this.$route.query.id;//项目id
      this.projectName = this.$route.query.name;//项目名称
      this.tempId = this.$route.query.tempId;//模板id
      this.isComplete = this.$route.query.completeTime ? true : false;
      if (this.isComplete) {
        this.$store.commit('SET_MILEPOST_SAVE', true);
      }
      //查询里程碑
      this.queryMilepost();
    },
    methods: {
      //返回项目主页
      goIndex() {
        this.$router.push({
          path: '/project/info',
          query: {projectId: this.projectId}
        });
      },
      //查询里程碑
      queryMilepost() {
        this.$http.post('plan/project/plan/tree', {
          projectId: this.projectId
        }).then(res => {
          if (res.statusCode == 200) {
            let tree = res.data;
            tree.add_id=res.data.id;
            this.managerId = res.data.managerId;
            //查询模板的结构
            if (this.tempId) {
              tree.children = [];
              this.$http.get('plan/plan/temp/info', {
                params: {
                  groupId: this.tempId
                }
              }).then(res => {
                if (res.statusCode == 200) {
                  let children = res.data.children;
                  children.map(function (item,index) {
                    item.parentId=tree.add_id
                  });
                  console.log(children);
                  this.getTemplateData(children);
                  tree.children = children;//新增。删除id的，遍历。
                  this.data = [tree];
                  console.log(tree)
                } else {
                  this.$message.error(res.statusMsg);
                }
              })
            } else {
              let mileTree=tree;
              this.getMilepostData(mileTree.children);
              // this.data = [tree];
              this.data=[mileTree];
              console.log(this.data);
            }

          } else {
            this.$message.error(res.statusMsg);
          }
        });
      },
      //设置某一个里程碑
      setMilepost(data, node) {
        const parent = node.parent;
        let arr = this.getParent(this.data, parent.data.add_id);
        let arr1 = [];
        arr.map(function (item, index) {
          arr1.push(item.principalId)
        });
        console.log(arr1);
        if(arr1.indexOf(this.$store.state.userInfo.userId)==-1){
          //没有出现过
          this.$message.error('你没有权限编辑该里程碑');
          return;
        }
        if(data.status==3){
          this.$message.error('该里程碑已完结，不能设置');
          return;
        }
        this.$store.commit('SET_MILEPOST_SAVE', false);
        if(!node.parent.data.startTime){
          this.$message.error('请先设置上级里程碑');
          return;
        }
        if(node.parent.data.startTime==''||node.parent.data.endTime==""){
          this.$message.error('请先设置上级里程碑');
          return;
        }
        let start = /\d{4}-\d{1,2}-\d{1,2}/g.exec(node.parent.data.startTime)[0]||'';
        let end = /\d{4}-\d{1,2}-\d{1,2}/g.exec(node.parent.data.endTime)[0]||'';
        let now= new Date().Format('yyyy-MM-dd');
        console.log(new Date(start).getTime());
        console.log(new Date(now).getTime());
        if(new Date(now).getTime()>new Date(start).getTime()){
          start=now
        }//这里判断，如果项目开始的时间已经小于今天的时间了，就限制在今天的时间
        this.pickerOptionsStart = {
          disabledDate(date) {
            let startdate = new Date(start) - 86400000;
            let enddate = new Date(end);
            return date && date.valueOf() < startdate || date.getTime() > enddate;
          },
        };
        this.pickerOptionsEnd = {
          disabledDate(date) {
            let startdate = new Date(start) - 86400000;
            let enddate = new Date(end);
            return date && date.valueOf() < startdate || date.getTime() > enddate;
          },
        };
        // console.log(this.executor);
        //打开设置框
        this.is_show_set_milepost = true;
        this.milepostForm = data;
        this.executor = data.principalId;
        this.reporting_time_type = data.reportCycleType == 0 ? '1' : '2'//1:无，2:自定义
      },
      //选择定期汇报方式
      selectReportingType(type) {
        if (type == 1) {
          this.milepostForm.reportCycleType = 0;//只汇报一次，定期汇报
          this.custom_date_data = {
            type: '1',//1每周 2每月
            is_show: false,//是否显示
          };
          //选择为定期汇报 ：无
        } else if (type == 2) {
          //选择定期汇报 ：自定义
          this.custom_date_data.is_show = true;
          this.custom_date_data.type = '1';//1每周，2每月
          if (this.custom_date_data.type == 1) {
            //每周
            this.custom_date_data.holiday_week = true;//跳过假日
          } else if (this.custom_date_data.type == 2) {
            //每月
            this.custom_date_data.holiday_month = false;//跳过假日
            this.custom_date_data.double_cease_month = false;//跳过双休
          }
          let arr = this.milepostForm.reportTime.split(":");
          this.custom_date_data.time = new Date(2016, 9, 10, arr[0], arr[1]);//汇报时间
          this.custom_date_data.day = this.milepostForm.day;//汇报的天数
          this.custom_date_data.ignoreHoliday = this.milepostForm.ignoreHoliday;
          this.custom_date_data.ignoreWeekend = this.milepostForm.ignoreWeekend;
        }
      },
      //确定单个里程碑
      saveMilepost() {
        this.$refs['milepostForm'].validate((valid) => {
          if (valid) {
            console.log(this.milepostForm);
            this.is_show_set_milepost = false;
            this.milepostForm = {};
            this.milepostForm.principalName = '';
            this.custom_date_data = {
              type: '1',//1每周 2每月
              is_show: false,//是否显示
            };
          } else {
            return false
          }
        });
      },
      //添加节点
      append(node, data) {
        if(data.status==3){
          this.$message.error('该里程碑已完结，不能新增子里程碑');
          return;
        }
        console.log(this.data);
        let arr = this.getParent(this.data, data.add_id);
        let arr1 = [];
        arr.map(function (item, index) {
          arr1.push(item.principalId)
        });
        console.log(arr1);
        if(arr1.indexOf(this.$store.state.userInfo.userId)==-1){
          //没有出现过
          this.$message.error('你没有权限为该里程碑增加子集里程碑');
          return;
        }
        this.$store.commit('SET_MILEPOST_SAVE', false);
        const newChild = {
          add_id: add_id++, //id
          name: '新里程碑', //名称
          children: [],
          days: [0],//汇报的天数，
          ignoreHoliday: false,//是否跳过节假日
          ignoreWeekend: false,//是否跳过周末
          reportCycleType: 0,//汇报方式 0：只汇报1次 7：每周汇报 30 每月汇报
          reportTime: '18:00',//汇报时间
          principalId: '',//执行人id
          startTime: '',//开始时间
          endTime: '',//截至时间
          parentId:data.add_id
        };
        if (!data.children) {
          this.$set(data, 'children', []);
        }
        data.children.push(newChild);
      },
      //查找一个节点的所有父节点
      treeFindPath(tree, func, path = []) {
        if (!tree) return [];
        for (const data of tree) {
          // 这里按照你的需求来存放最后返回的内容吧
          path.push(data.name);
          if (func(data)) return path;
          if (data.children) {
            const findChildren = treeFindPath(data.children, func, path);
            if (findChildren.length) return findChildren
          }
          path.pop()
        }
        return []
      },
      getParent(data2, nodeId2) {
        var arrRes = [];
        if (data2.length == 0) {
          if (!!nodeId2) {
            arrRes.unshift(data2)
          }
          return arrRes;
        }
        let rev = (data, nodeId) => {
          for (var i = 0, length = data.length; i < length; i++) {
            let node = data[i];
            if (node.add_id == nodeId) {
              arrRes.unshift(node);
              rev(data2, node.parentId);
              break;
            } else {
              if (!!node.children) {
                rev(node.children, nodeId);
              }
            }
          }
          return arrRes;
        };
        arrRes = rev(data2, nodeId2);
        return arrRes;
      },
      //删除节点
      remove(node, data) {
        const parent = node.parent;
        let arr=this.getParent(this.data, parent.data.add_id);
        let arr1 = [];
        arr.map(function (item, index) {
          arr1.push(item.principalId)
        });
        // arr1.push(data.principalId);
        console.log(arr1);
        console.log(arr1.indexOf(this.$store.state.userInfo.userId));
        if(arr1.indexOf(this.$store.state.userInfo.userId)==-1){
          //没有出现过
          this.$message.error('你没有权限删除该里程碑');
          return;
        }

        // //项目经理可以做所有的操作，当前的操作人是上级的执行人，就可以做删除。
        // if (this.managerId == this.$store.state.userInfo.userId) {
        //   //是项目经理
        // } else {
        //   //不是项目经理
        //   //判断是不是上级里程碑的执行人
        //   if (this.$store.state.userInfo.userId == parent.data.principalId) {
        //     //是当前的执行人
        //   } else {
        //     //不是当前的执行人
        //     this.$message.error('你没有权限删除该里程碑');
        //     return false;
        //   }
        // }
        this.$confirm('是否确认删除此里程碑?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          if(data.status==3){
            this.$message.error('该里程碑已完结，不能删除');
            return;
          }
          console.log(data);
          if(data.children.length>0){
            this.$message.error('该里程碑包含子里程碑,不可删除');
            return;
          }


          // let arr=this.getParent(this.data, parent.data.id);
          // let arr1 = [];
          // arr.map(function (item, index) {
          //   arr1.push(item.principalId)
          // });
          // console.log(arr1);
          // if(arr1.indexOf(this.$store.state.userInfo.userId)==-1){
          //   //没有出现过
          //   this.$message.error('你没有权限删除该里程碑');
          //   return;
          // }

          ////项目经理可以做所有的操作，当前的操作人是上级的执行人，就可以做删除。
          // if (this.managerId == this.$store.state.userInfo.userId) {
          //   //是项目经理
          // } else {
          //   //不是项目经理
          //   //判断是不是上级里程碑的执行人
          //   if (this.$store.state.userInfo.userId == parent.data.principalId) {
          //     //是当前的执行人
          //   } else {
          //     //不是当前的执行人
          //     this.$message.error('你没有权限删除该里程碑');
          //     return false;
          //   }
          // }
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.add_id === data.add_id);
          this.$store.commit('SET_MILEPOST_SAVE', false);
          children.splice(index, 1);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //选择自定义日期的回调
      selectDateCallback(data) {
        if (data.type == '1') {
          this.milepostForm.reportCycleType = 7;
          //每周
          this.milepostForm.ignoreHoliday = data.ignoreHoliday;
          this.milepostForm.reportTime = data.reportTime.Format('hh:mm');
          this.milepostForm.days = data.days;
          this.custom_date_data = false;
        } else {
          this.milepostForm.reportCycleType = 30;
          //每月
          this.milepostForm.ignoreHoliday = data.ignoreHoliday;
          this.milepostForm.reportTime = data.reportTime.Format('hh:mm');
          this.milepostForm.days = data.days;
          this.custom_date_data = false;
        }
        console.log(this.milepostForm);
      },
      //选择执行人回调
      selectMemberCallback(res, indexClose, obj) {
        this.$confirm('您选择的执行人将添加到'+this.projectName+'的成员列表中?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.executor_info = obj;
          this.executor = obj.userId;
          console.log(obj);
          this.milepostForm.principalId = obj.userId;
          this.milepostForm.principalName = obj.name;
          this.closeModal('is_show_selectMember');
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      //关闭人员弹框
      closeModal(res) {
        console.log(res);
        this[res] = false;
      },
      //递归遍历里程碑
      getMilepostData(data) {
        let _this = this;
        data.map(function (item, index) {
          milepost_num++;
          item.add_id=item.id?item.id:milepost_num;
          _this.getMilepostData(item.children,milepost_num);
        });
      },
      //递归遍历模板tree
      getTemplateData(data) {
        let _this = this;
        data.map(function (item, index) {
          num++;
          item.add_id=item.id?item.id:num;
          delete item.id;
          // num++;
          // item.add_id=num;
          _this.getTemplateData(item.children,num);
        });
      },
      //递归遍历整体tree
      setTree(data, item) {
        let _this = this;
        data.map(function (d, index) {
          if (d.id == _this.edit_id) {
            d.name = item.name;
            d.principalId = item.principalId;
            d.principalName = item.principalName;
            d.ignoreHoliday = item.ignoreHoliday;
            d.ignoreWeekend = item.ignoreWeekend;
            d.reportTime = item.reportTime;
            d.reportCycleType = item.reportCycleType;
            d.days = item.days;
            d.addTime = item.startTime;
            d.endTime = item.endTime;
            return false;
          }
          _this.setTree(d.children, item);
        })
      },
      //保存整体里程碑
      save() {
        // console.log(this.data);
        this.$http.post('plan/project/plan/addTree', this.data[0]).then(res => {
          if (res.statusCode == 200) {
            this.$message.success('保存成功');
            this.$store.commit('SET_MILEPOST_SAVE', true);
          } else {
            this.$message.error(res.statusMsg);
          }
        })
      },
      //去掉要保存时的数据id
      setData(data) {
        let _this = this;
        data.map(function (item, index) {
          delete item.id;
          if (!item.addTime) {
            _this.$message.error(`还未设置${item.name}的开始时间`);
            return false;
          } else if (!item.endTime) {
            _this.$message.error(`还未设置${item.name}的结束时间`);
            return false;
          }
          if (!item.principalId) {
            _this.$message.error(`还未设置${item.name}的执行人`);
            return false;
          } else {
            _this.setData(item.children);
          }
        });
      },
      //节点展开
      nodeExpand(data, node, event) {
        setTimeout(function () {
          let expanded = node.expanded;
        }, 10);
      },
      //节点关闭
      nodeCollapse(data, node, event) {
        setTimeout(function () {
          let expanded = node.expanded;
        }, 10);
      },
    }
  }
</script>

<style scoped type="text/scss" lang="scss">
  .milepost {
    height: 100%;
    padding-bottom: 24px;
    box-sizing: border-box;
    padding-right: 28px;

    .custom-date {
      z-index: 101;
    }

    .milepost_name {
      display: inline-block;
      width: 140px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .set-milepost {
      position: fixed;
      top: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: 100;
      background-color: rgba(0, 0, 0, 0.5);

      .set-milepost-inner, .custom-date-inner {
        width: 608px;
        height: fit-content;
        /*min-height: 384px;*/
        /*max-height: 420px;*/
        border-radius: 6px;
        background-color: #ffffff;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;

        .title {
          line-height: 80px;
          height: 80px;
          padding: 0 32px;
          font-size: 16px;
          color: #454A55;
          position: relative;

          .ic_close {
            position: absolute;
            background-image: url("../../../assets/img/close_icon.png");
            width: 16px;
            height: 16px;
            background-size: cover;
            background-repeat: no-repeat;
            right: 32px;
            top: 32px;
            cursor: pointer;
          }
        }

        .form {
          padding-right: 64px;

          .save-btn {
            display: inline-block;
            border-radius: 6px;
            width: 88px;
            line-height: 32px;
            text-align: center;
            cursor: pointer;
            background-color: #0755db;
            color: #FFFFFF;
          }

          .add-manager {
            position: absolute;
            width: 38px;
            height: 38px;
            background-image: url("../../../assets/img/project/add_manager_icon1.png");
            background-size: 38px 38px;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
          }

          .select-manager {
            padding-left: 50px;
          }
        }
      }
    }

    > .head {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .back-title {
        display: flex;
        align-items: center;
        position: relative;
        width: 100%;

        .back {
          color: #96a2aa;
        }

        .save-milepost {
          position: absolute;
          padding: 10px;
          text-align: center;
          right: 0;
          top: 0;
          background-color: #0a52e4;
          border-radius: 6px;
          color: #ffffff;
          cursor: pointer;
        }
      }
    }

    .content {
      height: calc(100% - 79px);
      background-color: #ffffff;
      border-radius: 6px;
      padding: 24px;

      .row {
        display: flex;
        position: relative;

        .left {
          width: 303px;

          .top {
            height: 49px;
            background-color: #f2f6f9;
          }

          .tree {
            height: calc(100% - 49px);

            .info-list {
              position: absolute;
              width: calc(100% - 303px);
              height: 60px;
              left: 303px;
              top: 0;
              background: #000;
            }
          }
        }

        .tree {
          width: 100%;
          position: relative;
          height: 60px;

          .info-list {
            position: absolute;
            width: calc(100% - 303px);
            height: 60px;
            line-height: 60px;
            left: 303px;
            top: 0;

            > li {
              text-align: center;
              font-size: 14px;
              color: #454A55;

              ul {
                display: flex;

                li {
                  flex: 1;

                  i {
                    display: inline-block;
                    background-image: url("../../../assets/img/milepost/ic_edit.png");
                    background-repeat: no-repeat;
                    background-size: cover;
                    width: 14px;
                    height: 14px;
                  }
                }
              }
            }
          }

          .info-item-first {
            li {
              color: #96A2AA;
            }
          }
        }

        .right {
          flex: 1;

          .top-list {
            height: 49px;
            line-height: 49px;
            background-color: #f2f6f9;
            display: flex;

            li {
              flex: 1;
              text-align: center;
              font-size: 14px;
              color: #96a2aa;
            }
          }
        }
      }
    }
  }
</style>
<style type="text/scss" lang="scss">
  .milepost {
    .el-tree {
      font-size: 14px;

      .el-tree-node__content {
        height: 60px;
      }

      .el-tree-node {
        position: relative;
      }

      .milepost-btn {
        position: absolute;
        left: 220px;
        top: 20px;

        .milepost-add {
          display: inline-block;
          width: 16px;
          height: 16px;
          background-image: url("../../../assets/img/milepost/ic_add.png");
          background-repeat: no-repeat;
          background-position: center;
        }

        .milepost-del {
          display: inline-block;
          width: 16px;
          height: 16px;
          background-image: url("../../../assets/img/milepost/ic_minus.png");
          background-repeat: no-repeat;
          background-position: center;
          margin-left: 5px;
        }
      }

    }
  }
</style>
<style lang="scss" type="text/scss">
  .form {
    .el-form-item__label {
      padding-right: 16px;
    }

    .el-input__inner, .el-textarea__inner {
      width: 400px;
      background-color: #f2f6f9;
      border-color: #f2f6f9;
    }

    .el-date-editor--date, .el-date-editor--time {
      .el-input__inner {
        width: 176px;
      }
    }

    .el-input__inner:focus, .el-textarea__inner:focus {
      background-color: #FFFFFF;
      border-color: #0755db;
    }

    .el-input__inner:hover {
      border-color: #f2f6f9;
    }

    .line-time {
      width: 20px;
    }
  }
</style>
